@import 'variables.scss';

.basic_input {
	border: none;
	border-bottom: solid 1px black;
	background: none;
	font-size: 14px;
	margin: 0 2px 0 5px;
	&:not([type="number"]){
		padding-right: 15px;
	}

	&:focus {
		outline: none;
	}

	&[readonly] {
		color: gray;
		border-color: gray;
	}

	&.empty_value {
		color: gray;
	}
}

.basic_input_clear {
	position: relative;
	background: url('../../../public/images/clear.png');
	left: -18px;
	cursor: pointer;
	opacity: .7;
	background-size: 16px;
	z-index: 111;
	width: 16px;
	height: 16px;
	display: inline-block;
	top: 2px;

	&:hover {
		opacity: 1;
	}
}

.width_700px {
	width: 700px;
}

.width_500px {
	width: 500px;
}

.width_150px {
	width: 150px;
}

.width_130px {
	width: 130px;
}

.width_105px {
	width: 105px;
}

.width_100px {
	width: 100px;
}

.width_85px {
	width: 85px;
}

.width_80px {
	width: 80px;
}

.width_60px {
	width: 60px;
}

.width_40px {
	width: 40px;
}

.require {
	color: red;
	margin-left: 0px;
	margin-right: 10px;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.basic_loading {
	&::before {
		height: 50px;
		content: 'loading...';
		@extend .center;
	}
}

.empty {
	@extend .center;
	height: 80px;
}

.list_root {
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	line-height: 18px;
	margin: 5px;
	background: #94cbfb;
	padding: 5px 22px 5px 8px;
	cursor: pointer;

	&:hover,
	&.active {
		background-color: $activeColor;
	}

	&.active {
		&:before {
			content: '\2713';
			display: inline-block;
			position: absolute;
			right: 5px;
			top: 7px;
			z-index: 1;
			color: green;
			font-size: 18px;
		}
	}
}

.seq {
	min-width: 17px;
	margin-right: 5px;
	font-weight: bold;
	font-size: 16px;
	margin-top: 3px;
	vertical-align: top;
	display: inline-block;
}

.oper_list {
	display: inline-block;

	.oper {
		color: grey;
		display: inline-block;
		margin: 0 8px 0 0;
		text-decoration: underline;
	}

	.disabled {
		text-decoration: line-through;
	}
}

.actions {
	margin: 5px;

	& > button {
		background-color: #388bff;
		border-color: #3c8dff #408ffe #3680e6;
		color: #fff;
		display: inline-block;
		padding: 2px 10px;
		margin: 0 5px;
		line-height: 25px;
		font-size: 13px;
		border: 1px solid #eaeaea;
		cursor: pointer;
		font-family: inherit;
		font-weight: 400;
		text-align: center;
		vertical-align: middle;
		overflow: hidden;
		outline: 0;

		&:not(.disabled):hover {
			border-color: #2678ec #2575e7 #1c6fe2 #2677e7;
			background-color: #388bff;
		}

		&.disabled {
			background-color: gray;
			cursor: default;
		}
	}
}

.abbr {
	border-bottom: dotted 1px gray;
}

.progress_entry {
	display: flex;
	align-items: start;
	margin: 10px 0;

	&:hover .edit {
		visibility: visible;
	}
}

.progress_mark {
	margin-right: 5px;
	display: inline-block;
	width: 16px;
	margin-top: 2px;
}

.time {
	display: inline;
	margin: 0 5px;
	font-size: 12px;
	color: gray;
	padding-top: 4px;
}

.log_entry {
	display: inline-block;
	line-height: 20px;
	word-break: break-all;
}

.scroll_list {
	overflow: auto;
	padding: 0 3px;
	flex: 1 0 100px;

	&::-webkit-scrollbar {
		width: 10px;
	}

	&::-webkit-scrollbar-thumb {
		background: #666;
		border-radius: 20px;
	}

	&::-webkit-scrollbar-track {
		background: #ddd;
		border-radius: 20px;
	}
}

.icon_img {
	opacity: .7;
	cursor: pointer;
	vertical-align: middle;

	&:hover {
		opacity: 1;
	}
}

.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: left center;
	cursor: pointer;
	background-size: 16px;
	vertical-align: middle;
	margin: 0 4px;
	opacity: .7;
	&:hover {
		opacity: 1;
	}

	&.edit {
		background-image: url('../../../public/images/pen.png');
		margin-top: 2px;
		flex: 0 1 16px;
		padding-right: 10px;
		visibility: hidden;
	}
	&.expanded {
		background-image: url('../../../public/images/expand.png');
	}
	&.collapsed {
		background-image: url('../../../public/images/collapse.png');
	}
	&.tick {
		background-image: url('../../../public/images/tick.png');
	}
	&.cross {
		background-image: url('../../../public/images/cross.png');
	}
}

.no_select {
	user-select: none;
}

.log_remark {
	color: #f44336;
	font-size: 12px;
	max-width: 300px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 5px;
}

.log_remark_editor {
	position: absolute;
	width: 200px;
	height: 50px;
	z-index: 1;
}

.screen_shot_img {
	max-width: 100%;
}
